<template>
  <div class="w-[1150px] relative print-style bg-white p-6 h-full">
    <div class="flex justify-between w-full text-center items-center">
      <div class="flex-1 text-center text-[32px]">{{ getSystemConfig('HISNAME') }}</div>
      <!-- <BaseBarcode :value="tableData[0]?.barcode" class="w-60 text-right" /> -->
    </div>
    <div class="text-center text-[22px] font-bold">手术安排单</div>
    <!-- <div class="flex justify-center w-full items-center">
      <div class="text-center font-semibold text-2xl">{{ getSystemConfig('HISNAME') }}手术安排单</div>
    </div> -->
    <div v-for="(item, index) in tableData" :key="index" class="flex-1 text-[10px] mt-3">
      <div class="flex items-center">
        <div class="mr-20">日期：{{ item[0].aptmTime }}</div>
        <div class="ml-32">总共：{{ item.length }}台手术</div>
      </div>
      <div class="print-table">
        <div class="flex">
          <div class="w-1/12 print-table-item">手术室</div>
          <div class="w-1/6 print-table-item">{{ item[0].oprRoomName }}</div>
          <div class="flex-1 print-table-item">共计 {{ item.length }} 台手术</div>
        </div>

        <div class="flex">
          <div class="w-1/12">
            <div class="flex">
              <div class="w-1/2 print-table-item">时间</div>
              <div class="w-1/2 print-table-item">台次</div>
            </div>
          </div>
          <div class="w-1/6">
            <div class="flex">
              <div class="w-1/3 print-table-item">病人ID</div>
              <div class="w-2/3 print-table-item">姓名</div>
            </div>
          </div>
          <div class="flex flex-1 !border-l-0">
            <!-- <div class="w-[73px] print-table-item">房间号</div> -->
            <div class="w-[256px] print-table-item">手术内容</div>
            <div class="w-[100px] print-table-item">麻醉方法</div>
            <div class="w-[74px] print-table-item">手术医师</div>
            <div class="w-[73px] print-table-item">麻醉医生</div>
            <div class="w-[73px] print-table-item">I助</div>
            <div class="w-[74px] print-table-item">II助</div>
            <div class="w-[74px] print-table-item">巡回护士</div>
            <div class="flex-1 print-table-item">器械护士</div>
          </div>
        </div>
        <div v-for="(items, indexs) in item" :key="indexs" class="flex break-words">
          <div class="flex !border-l-0 break-words w-1/12">
            <div class="w-1/2 print-table-item">{{ items.oprTime }}</div>
            <div class="w-1/2 print-table-item">{{ items.serialNumber }}</div>
          </div>
          <div class="flex !border-l-0 break-words w-1/6">
            <div class="w-1/3 print-table-item">{{ items.brId }}</div>
            <div class="w-2/3 print-table-item">{{ items.brName }}</div>
          </div>
          <div class="flex flex-1 !border-l-0">
            <!-- <div class="w-[73px] print-table-item">{{ items.oprRoomName }}</div> -->
            <div class="w-[256px] print-table-item">{{ items.oprCode }}</div>
            <div class="w-[100px] print-table-item">{{ items.anaesName }}</div>
            <div class="w-[74px] print-table-item">{{ items.oprDoctorName }}</div>
            <div class="w-[73px] print-table-item">{{ items.anaesDoctorName }}</div>
            <div class="w-[73px] print-table-item">{{ items.firstNurseName }}</div>
            <div class="w-[74px] print-table-item">{{ items.secondNurseName }}</div>
            <div class="w-[74px] print-table-item">{{ items.tourNurseName }}</div>
            <div class="flex-1 print-table-item">{{ items.instrumenttNurseName }}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- <div
      v-for="(item, index) in printData?.printData?.detail"
      :key="index"
      class="flex-1 text-[10px]"
      :class="printData?.printData?.detail[index - 1]?.aptmTime !== item.aptmTime ? ' mt-3 ' : ' '"
    >
      <div v-if="printData?.printData?.detail[index - 1]?.aptmTime !== item.aptmTime" class="flex items-center">
        <div class="mr-20">手术时间：{{ item.aptmTime }}</div>
        <div class="">总共：{{ item.serialNumber }}台手术</div>
      </div>
      <div class="border border-solid border-b-0" :class="printData?.printData?.detail[index - 1]?.aptmTime !== item.aptmTime ? '' : 'border-t-0'">
        <div v-if="printData?.printData?.detail[index - 1]?.aptmTime !== item.aptmTime" class="flex">
          <div class="w-1/6 print-table-item">手术室</div>
          <div class="w-1/5 print-table-item">{{ item.oprRoomName }}</div>
          <div class="flex-1 print-table-item">共计 {{ item.oprPath }} 台手术</div>
        </div>

        <div v-if="printData?.printData?.detail[index - 1]?.aptmTime !== item.aptmTime" class="flex">
          <div class="w-1/6">
            <div class="flex">
              <div class="w-1/2 print-table-item">时间</div>
              <div class="w-1/2 print-table-item">台次</div>
            </div>
          </div>
          <div class="w-1/5">
            <div class="flex">
              <div class="w-1/2 print-table-item">住院号</div>
              <div class="w-1/2 print-table-item">姓名</div>
            </div>
          </div>
          <div class="flex flex-1 !border-l-0">
            <div class="w-[73px] print-table-item">房间号</div>
            <div class="w-[73px] print-table-item">手术内容</div>
            <div class="w-[74px] print-table-item">麻醉方法</div>
            <div class="w-[74px] print-table-item">手术医师</div>
            <div class="w-[73px] print-table-item">麻醉医生</div>
            <div class="w-[73px] print-table-item">I助</div>
            <div class="w-[74px] print-table-item">II助</div>
            <div class="w-[74px] print-table-item">巡回护士</div>
            <div class="flex-1 print-table-item">器械护士</div>
          </div>
        </div>
        <div class="flex break-words">
          <div class="flex !border-l-0 break-words w-1/6">
            <div class="w-1/2 print-table-item">{{ item.oprTime }}</div>
            <div class="w-1/2 print-table-item">{{ item.serialNumber }}</div>
          </div>
          <div class="flex !border-l-0 break-words w-1/5">
            <div class="w-1/2 print-table-item">{{ item.admissionCode }}</div>
            <div class="w-1/2 print-table-item">{{ item.brName || '-' }}</div>
          </div>
          <div class="flex flex-1 !border-l-0">
            <div class="w-[73px] print-table-item">{{ item.oprRoomName }}</div>
            <div class="w-[73px] print-table-item">{{ item.oprCode }}</div>
            <div class="w-[74px] print-table-item">{{ item.anaesName }}</div>
            <div class="w-[74px] print-table-item">{{ item.oprDoctorName }}</div>
            <div class="w-[73px] print-table-item">{{ item.anaesDoctorName }}</div>
            <div class="w-[73px] print-table-item">{{ item.firstNurseName }}</div>
            <div class="w-[74px] print-table-item">{{ item.secondNurseName }}</div>
            <div class="w-[74px] print-table-item">{{ item.tourNurseName }}</div>
            <div class="flex-1 print-table-item">{{ item.instrumenttNurseName }}</div>
          </div>
        </div>
      </div>
    </div> -->
  </div>
</template>

<script setup>
import { getSystemConfig } from '@/utils/systemConfig'

const props = defineProps({
  printData: {
    type: Object,
    default: () => ({})
  }
})
// const patientInfo = ref({})
const tableData = ref([])

watch(
  () => props.printData,
  (val) => {
    tableData.value = val?.printData?.detail
    // tableData.value = tableData.value.slice(0, -1)
    const groupedByDate = tableData.value.reduce((acc, item) => {
      const date = item.oprDate
      if (!acc[date]) {
        acc[date] = []
      }
      acc[date].push(item)

      return acc
    }, {})
    tableData.value = Object.values(groupedByDate)
  }
)
</script>
<style lang="less" scoped>
.table-border {
  @apply border border-solid  border-t-0   p-1 break-words;
}
</style>
